<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>HOJ后台管理</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="./js/controller.js"></script>
  <script src="./js/myajax.js"></script>
  <script src="./js/filter.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">HOJ后台管理</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item"><a href="/front/index">返回主页</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li id="tab1" class="layui-nav-item">
          <a href="javascript:;">页面管理</a>
          <dl class="layui-nav-child">
            <dd id="tab1-1"><a href="./index">主页信息</a></dd>
            <dd><a href="javascript:;">bala bala</a></dd>
          </dl>
        </li>
        <li id="tab2" class="layui-nav-item">
          <a href="javascript:;">用户管理</a>
          <dl class="layui-nav-child">
            <dd id="tab2-1"><a href="./userList">用户概览</a></dd>
            <dd id="tab2-2"><a href="./code">代码查看</a></dd>
          </dl>
        </li>
        <li id="tab3" class="layui-nav-item">
          <a href="javascript:;">题目管理</a>
          <dl class="layui-nav-child">
            <dd id="tab3-1"><a href="./problemList">题目概览</a></dd>
            <dd id="tab3-2"><a href="./addProblem">添加题目</a></dd>
          </dl>
        </li>
        <li id="tab4" class="layui-nav-item">
          <a href="javascript:;">比赛管理</a>
          <dl class="layui-nav-child">
            <dd id="tab4-1"><a href="./contestList">比赛概览</a></dd>
            <dd id="tab4-2"><a href="./addContest">添加比赛</a></dd>
            <dd id="tab4-3"><a href="./contestUser">用户总览</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <table  class="layui-hide" id="demo" lay-filter="test"></table>
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-md" lay-event="goBack"><i class="layui-icon">&#xe603;</i>返回</button>
          <button class="layui-btn layui-btn-md" lay-event="addProblem">添加题目</button>
          <button class="layui-btn layui-btn-md" lay-event="submitEdit">应用单元格修改</button>
        </div>
      </script>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">删除</a>
      </script>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © Hunan University Online Judge
  </div>
</div>
<script src="./layui/layui.js"></script>
<script>
  //JavaScript代码区域
  var contestId = getUrlVar("contestId");
  if (isBlank(contestId) == true) {
    alert("contestId参数错误");
    window.location.href = "./contestList";
  }

  layui.use('element', function(){
    var element = layui.element;
  });
  var tab = document.getElementById("tab4");
  tab.className += "  layui-nav-itemed";
  var tab_t = document.getElementById("tab4-1");
  tab_t.className += " layui-this";

  var postList = new Object();

  layui.use('table', function(){
    var table = layui.table;
    var form = layui.form;
    //第一个实例
    table.render({
      elem: '#demo',
      toolbar: '#toolbarDemo',
      url: ojurl + "/admin/contest/problem/list", //数据接口
      headers: {"token" : getName(tokenName)},
      where: {"contestId": contestId},
      parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.count, //解析数据长度
          "data": res.data.list //解析数据列表
        };
      },
      response: {
        statusCode: 200 //规定成功的状态码，默认：0
      },
      cols: [[ //表头
        {field: 'problemId', width: 180, title: 'ID', sort: true, fixed: 'left'},
        {field: 'title', title: '标题', edit: "text"},
        {field: 'timeLimit', title: '时限(S)', width: 90, edit: "text"},
        {field: 'timeLimitSpc', title: '特别时限(S)', width: 110, edit: "text"},
        {field: 'memoryLimit', title: '内存限制(M)', width: 110, edit: "text"},
        {field: 'isSpj', title: '是否特判', width: 90},
        {field: 'addTime', title: '题目添加时间', width: 200},
        {field: 'judgeFiles', title: '评测数据组数', width: 120},
        {width: 70, templet: '#barDemo', fixed: 'right'}
      ]]
    });

    //监听单元格编辑
    table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
      // console.log(obj.value); //得到修改后的值
      // console.log(obj.field); //当前编辑的字段名
      // console.log(obj.data); //所在行的所有相关数据 
      var data = obj.data;
      if (isNum(data.timeLimit) == false || isNum(data.timeLimitSpc) == false || isNum(data.memoryLimit) == false) {
        layer.alert("时限和空限字段必须为数字");
        return;
      }
      var jsonData = new Object();
      jsonData.problemId = String(data.problemId);
      jsonData.title = String(data.title);
      jsonData.timeLimit = String(data.timeLimit);
      jsonData.timeLimitSpc = String(data.timeLimitSpc);
      jsonData.memoryLimit = String(data.memoryLimit);
      postList[jsonData.problemId] = jsonData;
    });

    //头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      if (obj.event == 'addProblem') {
        layer.open({
          type: 1, //此处以iframe举例
          title: '添加题目',
          area: ['520px', '380px'],
          shade: 0,
          // maxmin: true,
          content: '<form class="layui-form layui-form-pane" role="form" id="problemInfo" style="margin: 1em">'+
            '<div class="layui-form-item"><label for="problemId" class="layui-form-label">题目ID</label>'+
            '<div class="layui-input-block"><input type="number" placeholder="对应题库里面的problemId" class="layui-input" id="problemId" name="problemId"/></div></div>'+
            '</form>',
          btn: ['提交', '关闭'], //只是为了演示
          yes: function(){
            var problemId = String(document.getElementById("problemId").value);
            var jsonData = new Object();
            jsonData.problemId = problemId; 
            jsonData.contestId = String(contestId);
            addProblemToContest(jsonData, layer);
          },
          btn2: function(){
            layer.closeAll();
          }
        });
      }
      if (obj.event == 'goBack') {
        window.location.href = "./contestList";
      }
      if (obj.event == 'submitEdit') {
        // console.log(contestId);
        // console.log(postList);
        submitContestProblemEdit(contestId, postList);
      }
    });

    //监听工具条
    table.on('tool(test)', function(obj){
      var data = obj.data;
      layer.confirm('确认删除', function(){
        var jsonData = new Object();
        jsonData.problemId = String(data.problemId);
        jsonData.contestId = String(contestId);
        deleteProblem(jsonData);
      });
    });
    
  });
</script>
</body>
</html>